<template>
	<div class="system-busPresettingBit-add">
		<el-dialog v-model="isShowDialog" width="1400px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div
					v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
					{{ title }}:添加摄像头预置位
				</div>
			</template>
			<div class="info_list">
				<div class="video_box">
					<iframe :src="src" width="860" height="600" allowfullscreen
						allow="autoplay; fullscreen; microphone;"></iframe>
					<!-- <video id="video_box" class="video_air" controls autoplay muted width="100%" height="100%"></video> -->
				</div>
				<div>
					<el-button type="primary" style="margin: 0 20px 20px" @click="addPre">
						<el-icon>
							<ele-Plus />
						</el-icon>
						添加预置点
					</el-button>
					<el-button v-if="isAdmin == 1" type="primary" style="margin: 0 20px 20px" @click="addCapture(1)">
						<el-icon>
							<ele-Plus />
						</el-icon>
						手动抓拍
					</el-button>
					<el-button v-if="isAdmin == 1" type="primary" style="margin: 0 20px 20px" @click="addCapture(2)">
						<el-icon>
							<ele-Plus />
						</el-icon>
						报警抓拍
					</el-button>
					<el-table :data="tableData" height="500px" border>
						<el-table-column label="序号" align="center" type="index" width="80" />
						<el-table-column label="名称" align="center" prop="indexName" width="100px"></el-table-column>
						<el-table-column label="停留时间" align="center" prop="timeout" width="100px"></el-table-column>
						<el-table-column label="操作" align="center" width="200px">
							<template #default="scope">
								<el-button type="primary" link @click="handleEdit(scope.row)">
									<el-icon>
										<ele-Edit />
									</el-icon>
									修改
								</el-button>
								<el-button type="primary" link @click="handleDebug(scope.row)">
									<el-icon>
										<ele-View />
									</el-icon>
									调用
								</el-button>
								<el-button type="danger" link @click="handleDelete(scope.row)">
									<el-icon>
										<ele-DeleteFilled />
									</el-icon>
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<presetDetail ref="presetDetailRef" @busPresettingBitList="busPresettingBitList"></presetDetail>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, nextTick } from 'vue';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import {
	listBusPresettingBit,
	delBusPresettingBit,
	addBusPresettingBit,
	busPresettingBitGet, captureCamera, capture_alarm
} from '/@/api/system/ys7Cameras';
import presetDetail from './preset.vue'
import { Session } from '/@/utils/storage';

export default defineComponent({
	name: 'index',
	components: { presetDetail },
	setup(props, { emit }) {
		const { proxy } = <any>getCurrentInstance();
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const presetDetailRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			formData: {
				id: undefined,
				serial: undefined,
				code: undefined,
				command: undefined,
				preset: undefined,
				name: undefined,
				deviceSerial: undefined,
				updateBy: undefined,
				createdAt: undefined,
				updatedAt: undefined,
				deletedAt: undefined,
			},
			// 表单校验
			rules: {
				id: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '预置位名称不能为空', trigger: 'blur' }],
			},
			title: '',
			updateRow: null,
			tableData: [], //预置点列表数据
			flvPlayer: null,
			src: '',
			presetList: [] as any, //编号数组
			isAdmin: 0
		});
		// 打开弹窗
		const openDialog = (row: any) => {
			var userinfo = Session.get("userInfo");
			if (userinfo) {
				state.isAdmin = userinfo.isAdmin
			}
			resetForm();
			state.updateRow = row;
			state.title = row.name; //摄像头名称
			state.formData.deviceSerial = row.deviceSerial;
			state.formData.code = row.code;
			state.isShowDialog = true;
			busPresettingBitList(); // 获取预置点列表数据
			nextTick(() => {
				videoPlay(row.mobileLive);
			});
		};
		const addCapture = (type: any) => {
			const loading = ElLoading.service({
				lock: true,
				text: '正在抓拍中……',
				background: 'rgba(0, 0, 0, 0.7)',
			})
			if (type == 1) {
				captureCamera({ deviceSerial: state.formData.deviceSerial }).then((res: any) => {
					if (res.code == 0) {
						ElMessage.success('手动抓拍成功');
					}
					loading.close()
				})
			} else {
				capture_alarm({ deviceSerial: state.formData.deviceSerial }).then((res: any) => {
					if (res.code == 0) {
						ElMessage.success('手动报警抓拍成功');
					}
					loading.close()
				})
			}
		}
		const handleEdit = (row: any) => {
			state.formData.indexName = row.indexName
			state.formData.timeout = row.timeout
			state.formData.id = row.id
			presetDetailRef.value.openDialog(state.formData)
		}
		// 添加预置点
		const addPre = () => {
			state.formData.indexName = ''
			state.formData.timeout = ''
			state.formData.id = ''
			presetDetailRef.value.openDialog(state.formData)
			// ElMessageBox.prompt('请输入预置点名称', '温馨提示', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	inputErrorMessage: '请输入预置点名称',
			// })
			// 	.then(({ value }) => {
			// 		state.formData.indexName = value;
			// 		state.formData.timeout = parseInt(new Date().getTime()/1000);
			// 		addBusPresettingBit(state.formData)
			// 			.then(() => {
			// 				ElMessage.success('添加成功');
			// 				busPresettingBitList(); //获取预置点
			// 			})
			// 			.finally(() => {
			// 				state.loading = false;
			// 			});
			// 	})
			// 	.catch(() => {});
		};
		const setPerset = () => {
			let arr = [];
			for (let index = 1; index <= 255; index++) {
				arr.push(index);
			}
			// 没有被使用的编号 1-255
			let list = arr.filter((item) => !state.presetList.some((ele) => ele === item));
			return list[0];
		};
		// 视频播放
		const videoPlay = (src: any) => {
			state.src = src
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 获取预置点列表数据
		const busPresettingBitList = () => {
			let param = {
				pageNum: 1,
				pageSize: 100,
				deviceSerial: state.formData.deviceSerial
			};
			state.presetList = [];
			listBusPresettingBit(param).then((res: any) => {
				let list = res.data.list ?? [];
				state.tableData = list;
			});
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		const handleDelete = (row: any) => {
			let msg = '你确定要删除所选数据？';
			let id: number[] = [];
			if (row) {
				msg = `此操作将永久删除数据，是否继续?`;
				id = [row.id];
			}
			if (id.length === 0) {
				ElMessage.error('请选择要删除的数据。');
				return;
			}
			ElMessageBox.confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					let obj = {
						ids: id
					};
					delBusPresettingBit(obj).then((res: any) => {
						if (res.code == 0) {
							ElMessage.success('删除成功');
							busPresettingBitList();
						}
					});
				})
				.catch(() => { });
		};
		// 调试
		const handleDebug = (row: any) => {
			let obj = {
				deviceSerial: row.deviceSerial,
				index: row.index
			};
			busPresettingBitGet(obj).then((res: any) => {
				if (res.code == 0) {
					ElMessage.success('调用成功');
				} else {
					ElMessage.error(res.message);
				}
			});
		};
		// 提交
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					state.loading = true;
					//添加
					state.formData.preset = 1;
					addBusPresettingBit(state.formData)
						.then(() => {
							ElMessage.success('添加成功');
							closeDialog(); // 关闭弹窗
							emit('busPresettingBitList', state.updateRow);
						})
						.finally(() => {
							state.loading = false;
						});
				}
			});
		};
		const resetForm = () => {
			state.formData = {
				id: undefined,
				serial: undefined,
				code: undefined,
				command: undefined,
				preset: undefined,
				name: undefined,
				deviceSerial: undefined,
				updateBy: undefined,
				createdAt: undefined,
				updatedAt: undefined,
				deletedAt: undefined,
			};
		};
		return {
			proxy,
			openDialog,
			closeDialog,
			onCancel, presetDetailRef,
			onSubmit,
			menuRef, handleEdit,
			formRef, busPresettingBitList,
			handleDebug,
			handleDelete, addCapture,
			addPre,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
.system-busPresettingBit-add {
	.info_list {
		width: 100%;
		display: flex;
		height: 600px;

		.video_box {
			//width: 75%;
			height: 100%;
			margin-right: 10px;

			.iframe {
				border: none;
				outline: none;
			}

			.video_air {
				width: 100%;
				height: 100%;
				object-fit: fill;
			}
		}
	}
}
</style>
